<script setup lang="ts">
import { ref } from 'vue'
import daglService from '@/api/dagl'
import { ElMessage } from 'element-plus'

import Chart from '@/components/charts/index.vue'
const tableData = ref<{ dw: string; ysyrl: string; sx: string }[]>([])
const chartData = ref<{ name: string; value: number }[]>([])
const queryCctj = () => {
  daglService
    .queryCctj()
    .then((res) => {
      if (res) {
        tableData.value = [{ dw: '上海人民检查院', ysyrl: res.data.ysyrl + 'GB', sx: '1' }]
        chartData.value = [
          { name: '剩余空间', value: res.data.cczrl - res.data.ysyrl },
          { name: '已用空间', value: res.data.ysyrl },
        ]
      }
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}
queryCctj()
</script>

<template>
  <div class="container">
    <div class="chart-box">
      <Chart chartType="ccpie" :chartData="chartData"></Chart>
    </div>
    <div class="table-box">
      <el-table :data="tableData" stripe row-key="id" height="100%">
        <el-table-column prop="sx" label="序号" width="100" align="center" />
        <el-table-column prop="dw" label="单位名称" show-overflow-tooltip />
        <el-table-column prop="ysyrl" label="已用存储" show-overflow-tooltip />
      </el-table>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  display: flex;
  .chart-box {
    border: 1px solid #dae4f1;
    flex: 3;
  }
  .table-box {
    border: 1px solid #dae4f1;
    margin-left: 10px;
    flex: 2;
  }
}
</style>
